<template>
  <!-- 业绩提成主页面 -->
  <app-container class="performanceFee">
    <app-block>
      <h3 class="performanceFee__h3">业绩提成</h3>
      <div>
        <zm-form :model="searchForm" ref="searchFormRef" inline>
      <zm-tabs v-model="active" @tab-click="resetForm('searchFormRef')">
      <el-tab-pane label="我的提成" name="first">
        <!-- 业绩提成-我的提成 -->
           <div>
          <zm-form-item label="业绩单核算状态:" prop="status">
            <zm-data-radio
              is-btn
              has-all
              :list="ACCOUNTING_STATUS"
              v-model="searchForm.status"
              @change="onSearch"
            />
          </zm-form-item>
        </div>
        </el-tab-pane>
        <el-tab-pane label="小组提成" name="second">
          <div>
              <zm-form-item prop="month">
              <zm-date-picker
                v-model="searchForm.month"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择月"
            />
            </zm-form-item>
            <zm-form-item label prop="salemanId">
              <zm-data-select
                v-model="searchForm.salemanId"
                :list="getSaleLists"
                placeholder="选择业务员"
                class="w200"
              ></zm-data-select>
            </zm-form-item>
            <zm-form-item>
              <zm-button @click="onSearch" t="search"></zm-button>
              <zm-button @click="onReset" t="reset"></zm-button>
              <zm-button type="warning" @click="onGetFields">导出</zm-button>
              <zm-export ref="export" :api="exportApi()" type="warning" :params="exportForm" v-show="false"></zm-export>
            </zm-form-item>
          <div>
          <zm-form-item label="业绩单核算状态:" prop="status">
            <zm-data-radio
              is-btn
              has-all
              :list="ACCOUNTING_STATUS"
              v-model="searchForm.status"
              @change="onSearch"
            />
          </zm-form-item>
        </div>
        </div>
      </el-tab-pane>
      </zm-tabs>
      </zm-form>
      <zm-table-data
        :data="tableParams.data"
        ref="multipleTable"
        :columns="salesManColumns"
        :fetch="loadList"
        :table-params="tableParams"
        :mutilple="true"
        @selection-change="saveIds"
      ></zm-table-data>
      </div>
      <export-panel
        :api="exportField()"
        v-if="exportParams.visible"
        v-model="exportParams.visible"
        @after="onExport"
        type="9"
      ></export-panel>
    </app-block>
    <royalty-details v-if="isVisibleDialog" v-model="isVisibleDialog" :is-show-btn="false" :detail-info="info" :tab-change="active" @onCancel="onCancel" @refreshPage="onSearch"></royalty-details>
  </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import RoyaltyDetails from './components/detail/index.vue'
import {salesManColumns} from './const.js'
import * as commissionApi from '@/api/src/salesmanCommission'
import {getSaleList, getUserInfo} from '@/api/src/public'
import {ACCOUNTING_STATUS} from '@/model/index'
import ExportPanel from '@/components/exportFields'

export default {
  name: 'SalesmanCommission',
  components: {RoyaltyDetails, ExportPanel},
  mixins: [tableMixin],
  data () {
    return {
      active: 'first',
      ACCOUNTING_STATUS, // 业绩单核算状态
      searchForm: {
        month: '', // 月份
        salemanId: '', // 业务员ID
        status: '-1' // 状态
      },
      getSaleLists: [], // 业务员下拉
      isVisibleDialog: false,
      info: {
        id: '', // 业务员id
        month: '', // 月份
        performanceId: '' // 绩效ID
      }, // 传入的详情对象信息
      userInfo: {}, // 用户信息
      selectedNos: '',
      exportForm: {

      },
      exportParams: {visible: false}
    }
  },
  computed: {
    salesManColumns () {
      return salesManColumns(this)
    }
  },
  created () {
    this.init()
  },
  methods: {
    // 初始化
    init () {
      // this.getNowMonth()
      this.getGetSaleList()
    },
    // 加载表格数据
    async loadList () {
      this.userInfo = await getUserInfo()
      if (this.active === 'first') {
        const _res = await commissionApi.getPageList(this.assignQuery({...this.searchForm, salemanId: this.userInfo.userId, tabType: this.active}))
        this.initialTableData(_res.list, _res.count)
      } else {
        const _res = await commissionApi.getPageList(this.assignQuery({...this.searchForm}))
        this.initialTableData(_res.list, _res.count)
      }
    },
    exportApi () {
      return commissionApi.export
    },
    exportField () {
      return commissionApi.exportField
    },
    onGetFields () {
      this.exportParams.visible = true
    },
    async onExport (fields) {
      this.exportForm = {...this.searchForm, ...{ids: this.selectedNos, tabType: 'second'}, ...{fields: fields}}
      this.$refs.export.onExport()
    },
    saveIds (selection, row) {
      // 保存已选
      this.selectedNos = selection.map(item => item.id).join(',')
      console.log(this.selectedNos, 'this.selectedNos')
    },
    // 获取业务员下拉
    async getGetSaleList () {
      this.getSaleLists = await getSaleList({userType: '3'})
    },
    // 重置
    onReset () {
      if (this.$refs.searchFormRef) {
        this.$refs.searchFormRef.resetFields()
        this.apartmentId = []
        this.searchForm.month = ''
        this.onSearch()
      }
    },
    // 获取当前年月
    // getNowMonth () {
    //   var now = new Date()
    //   var year = now.getFullYear()
    //   var month = now.getMonth() + 1

    //   month = month.toString().padStart(2, '0')
    //   var defaultMonth = `${year}-${month}`
    //   // this.$set(this.searchForm, 'month', defaultMonth)
    //   this.searchForm.month = defaultMonth
    // },
    // 详情
    onDetail (row) {
      this.info.id = row.salemanId
      this.info.performanceId = row.id
      this.info.month = row.month
      this.isVisibleDialog = true
    },
    onCancel (val) {
      this.isVisibleDialog = val
    },
    // 点击标签栏重置表单
    resetForm (searchFormRef) {
      this.$refs[searchFormRef].resetFields()
      this.loadList()
    }
  }
}
</script>

<style lang="scss" scoped>
.performanceFee{
  .el-form-item{
    margin-top:15px
  }
  .performanceFee__h3{
    margin-top:0px
  }
}
</style>
